<template>
  <div class="page">
    <div class="head-img">
      <img v-if="userLanguage.code == 'zh_CN'" src="@/assets/images/user/icon_extend_zh.png" alt="">
      <img v-else src="@/assets/images/user/icon_extend_en.png" alt="">
    </div>
    <div class="body">
      <template v-if="!loading">
        <template v-if="status != 'APPLYING'">
          <div class="item personal">
            <img src="@/assets/images/user/icon_personal_invite.png" alt="">
            <div>
              <div class="title">{{ $t('personal.IndividualAffiliate') }}</div>
              <div class="desc">{{ $t('personal.Ordinary') }}<span>{{ $t('personal.promotersBonus') }}</span></div>
              <div class="btn" @click="toPersonal">{{ $t('personal.StartNow') }}</div>
            </div>
          </div>
          <div class="item team">
            <img src="@/assets/images/user/icon_team_invite.png" alt="">
            <div>
              <div class="title">{{ $t('personal.GroupAffiliate') }}</div>
              <div class="desc">
                {{ $t('personal.commercial') }}<span>{{ $t('personal.promoterRebate') }}</span>{{ $t('personal.monthPeriod') }}
              </div>
              <div class="btn" @click="toTeam">{{ $t('personal.ApplyOpen') }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <!--等待审核-->
          <div class="moderated">
            <div class="title">
              <Icon size="20" type="md-time" />
              <span>{{ $t('user.pendingReview') }}</span>
            </div>
            <p class="text">
              {{ $t('user.pendingReviewHint') }}
            </p>
          </div>
        </template>
      </template>
      <template v-else>
        <t-loading></t-loading>
      </template>
    </div>
    <t-agreement v-if="articleAgreementIndividual" :id="articleAgreementIndividual.id" @confirm="confirmAgreement"
      @close="closeAgreement" v-model="popup">
    </t-agreement>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { personalPromoteOpen, groupApplyInfo, groupApplyStatus } from "@/api/invite";
import TAgreement from "@/components/t-agreement";
import TLoading from "@/components/t-loading";

export default {
  name: "Invite-index",
  components: { TLoading, TAgreement },
  data() {
    return {
      status: '', // 申请状态
      loading: false,
      reviewPop: false,
      consentAgreement: false, // 同意协议
      popup: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      userLanguage: state => state.user.userLanguage,
      articleAgreementIndividual: (state) => {
        // 100buy平台推广协议-个人
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_INDIVIDUAL_PROMOTION;
        }
        return obj;
      }
    })
  },
  created() {
    this.getGroupApplyStatus();
  },
  methods: {
    onConfirm() {
      this.$router.go(-1);
    },
    closeAgreement(bol) {
      this.consentAgreement = bol;
    },
    confirmAgreement(bol) {
      // 同意协议
      this.consentAgreement = bol;
      personalPromoteOpen().then(({ code }) => {
        if (code == 200) {
          this.$store.dispatch('getUserInfo').then(() => {
            this.$router.push(`/user/invite/personal-promotion`)
          })
        }
      }).catch()
    },
    toPersonal() {
      if (this.userInfo.inviteCode) {
        this.$router.push(`/user/invite/personal-promotion`)
      } else {
        this.popup = true;
      }
    },
    getGroupApplyStatus() {
      this.loading = true;
      groupApplyStatus().then((res) => {
        this.loading = false;
        this.status = res.result;
      }).catch(() => {
        this.loading = false;
      })
    },
    toTeam() {
      this.$router.push(`/user/invite/team-promotion`);
    }
  }
}
</script>

<style scoped lang="less">
.page {
  padding: 25px 10px;

  .head-img {
    margin-bottom: 65px;

    img {
      // width: 1963px;
      height: 123px;
    }
  }

  .body {
    display: flex;
    justify-content: space-between;

    .personal {
      width: 42%;
      margin-right: 5%;
    }

    .team {
      width: 48%;
      margin-left: 5%;
    }

    .item {
      display: flex;
      align-content: center;

      img {
        width: 129px;
        height: 129px;
        margin-right: 25px;
      }

      .title {
        font-size: 22px;
        font-weight: 500;
        color: #232323;
        margin-bottom: 10px;
      }

      .desc {
        font-size: 14px;
        font-weight: 500;
        color: #999999;

        span {
          color: #E76202;
        }
      }

      .btn {
        width: 174px;
        height: 52px;
        border-radius: 2px;
        background: #E76202;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-top: 16px;
        cursor: pointer;
      }
    }

    .moderated {
      width: 50%;
      margin: 0 auto;
      text-align: left;

      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        color: @primary-color;
        font-size: 16px;
        font-weight: 500;

        span {
          margin-left: 6px;
        }
      }

      .text {
        margin-top: 12px;
        color: @t-text-color;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}

.review-pop {

  .review-content {
    text-align: center;
    color: @t-title-color;
    font-size: 16px;
    font-weight: 500;
  }

  :deep(.ivu-modal) {
    .ivu-modal-header {
      padding-top: 24px;
      padding-bottom: 24px;

      .ivu-modal-header-inner {
        font-size: 20px;
      }
    }

    .ivu-modal-close {
      top: 13px;

      .ivu-icon-ios-close {
        color: @t-title-color;
        font-size: 44px;
      }
    }

    .ivu-modal-body {
      padding: 55px;
    }

    .ivu-modal-footer {
      border: 0;
    }
  }

  .review-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .btn-review {
      display: flex;
      background: @t-title-color;
      color: #ffffff;
      height: 44px;
      border-radius: 2px;
      opacity: 1;
      padding: 12px 48px;
      cursor: pointer;
    }
  }
}
</style>